<template>
	<view class="">
		<u-modal
			:show="show"
			:show-cancel-button="true"
			:cancel-text="actualCancelText"
			:confirm-text="actualConfirmText"
			contentTextAlign="center"
			@confirm="handleConfirm"
			@cancel="handleCancel"
			cancelColor="#333"
			confirmColor="#007aff">
			<template v-slot>
				<view class="content">
					<view class="title" v-if="!isShowBorder">
						<text :class="type">
							{{ title || t("hint") }}
						</text>
					</view>
					<text class="content-text">{{ contentText }}</text>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
// 国际化
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const props = defineProps({
	title: { type: String, default: "" },
	contentText: { type: String, default: "" },
	type: { type: String, default: "tip" },
	cancelText: { type: String, default: "" },
	confirmText: { type: String, default: "" },
	isShowBorder: { type: Boolean, default: false },
});
const actualCancelText = computed(() => props.cancelText || t("cancel"));

const actualConfirmText = computed(() => props.confirmText || t("conform"));
const borderLeft = computed(() => (props.isShowBorder ? "1px" : "0"));
const emit = defineEmits(["handleConfirm", "handleCancel"]);
const show = ref(true);

const handleConfirm = () => {
	emit("handleConfirm");
};

const handleCancel = () => {
	emit("handleCancel");
};
</script>

<style lang="scss" scoped>
.content {
	text-align: center;
	display: flex;
	flex-direction: column;
	.title {
		padding: 8px 0 20px;
		text {
			font-size: 16px;
			font-weight: 500;
		}
		.tip {
			color: #f0ad4e;
		}
		.warn {
			color: #dd524d;
		}
		.blackTip {
			color: #909399;
		}
		.nomal {
			color: rgba(0, 0, 0, 0.9);
		}
		.greenTip {
			color: #4cd964;
		}
	}
	.content-text {
		font-size: 14px;
		color: #6c6c6c;
	}
}
:deep(.u-slide-up-enter-active) {
	/* #ifdef H5 */
	bottom: 0 !important;
	/* #endif */
}
:deep(.u-fade-enter-active) {
	/* #ifdef H5 */
	bottom: 0 !important;
	/* #endif */
}
:deep(.u-modal__button-group__wrapper--confirm) {
	border-left-color: #f0f0f0;
	border-left-style: solid;
	border-left-width: v-bind(borderLeft);
}
</style>
